import * as Cesium from 'cesium';
// @ts-ignore
import defaultImage from '@/assets/img/location.png';
import gisTools from '../GisTools';
import mouseHelper from '../MouseHelper';
//当前类使用的全局的viewer
let cviewer: any = {};
//当前类的事件句柄
let handler: any = {};

/**
 * 添加、清除测试过
 */
class MeasurePoint {
  isDrawingEnd: any;
  drawedPositions: any;
  drawedGraphics: any;
  constructor(viewer: any) {
    //绘制完成的graphics 数组 Array<any>
    this.drawedGraphics = [];
    //绘制完成的geometry  -数据类型 Array<Cartesian3>
    this.drawedPositions = [];
    //是否绘制结束
    this.isDrawingEnd = false;
    cviewer = viewer;
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  }
  /**
   * 点标注-不考虑连续性
   * @param options  {
   *   "Point" : { "iconImage":"图片的内容"  }
   *    "popOffset":{x:400,y:0}
   * }
   */
  startMeasure(options: any={}) {
    this.clearDrawGraphic();
    let _this = this;
    let { iconImage,popOffset } = options;
    if(mouseHelper.helperTips){
      mouseHelper.removeHelper();
    }
    mouseHelper.createHelper({ x:-500,y:-500 }, '',popOffset);
    //左键事件
    handler.setInputAction(function(evt: any) {
      let car3 = gisTools.getCar3Position(cviewer,evt.position);
      let pointEntity = _this.createPoint(car3, evt.position, iconImage,popOffset);
      _this.drawedGraphics.push(pointEntity);
      _this.drawedPositions.push(car3);
      _this.isDrawingEnd = true;
      _this.endDrawing();
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //鼠标移动事件
    handler.setInputAction(function(evt: any) {
      mouseHelper.updateHelper(evt.endPosition, '点击鼠标左键添加',popOffset);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }

  /**
   *结束绘制的事件
   */
  endDrawing() {
    if(handler){
      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    mouseHelper.removeHelper();
    return true;
  }

  /**
   * 清除绘制的Graphic
   */
  clearDrawGraphic() {
    this.endDrawing();
    if(this.drawedGraphics.length>0){
      this.drawedGraphics.forEach((item:any)=>{
        cviewer.entities.remove(item)
      })
    }
    let div= document.querySelector("#zb_measure");
    if(div){
      div.remove();
    }
    this.isDrawingEnd=false;
    this.drawedPositions=[];
    this.drawedGraphics=[];
    return true;
  }

  /**
   * 添加点Marker-和坐标说明
   * @param position 坐标，笛卡尔坐标 Cesium.Cartesian3
   * @param iconImage  图片的内容
   */
  createPoint(position: any, screenPosition: any, iconImage: string,offset:any) {
    if(!offset){ offset={x:0,y:0} }
    if(!iconImage){
      iconImage = defaultImage;
    }
    let currentScale = 0;
    let imageSize = 0.5;
    var point = cviewer.entities.add({
      position: position,
      billboard: {
        image: iconImage,
        scale: new Cesium.CallbackProperty(() => {
          currentScale += 0.05;
          return currentScale >= imageSize ? imageSize : currentScale;
        }, false),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      },
    });
    let jwd = gisTools.Cartesian3ToLngLat(position);
    let pop = document.createElement('div');
    pop.innerHTML = `<div style='display: flex;flex-direction: column;'>
         <div style='display: flex;flex-direction:column;width: 200px;height: 200px;color:#00FA9A;border-radius: 10px;background-color: rgba(0,0,0,0.4);border:1px solid #00FA9A;'>
         <div style='color: #ffffff;font-size: 18px;font-weight: 600;margin-left: 10px;margin-top: 10px;'>位置信息</div>
         <div style='white-space: nowrap;margin-top: 10px;margin-left: 20px;'>经度：${jwd.latitude.toFixed(5)}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>纬度：${jwd.longitude.toFixed(5)}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>横坐标：${position['x'].toFixed(2)}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>纵坐标：${position['y'].toFixed(2)}</div>
         <div style='white-space: nowrap;margin-left: 20px;'>高度：${jwd.altitude.toFixed(5)}</div></div>
         <div style='width: 100%;height: 18px;display: flex;justify-content: center;'>
         <div style='width: 0;border: 10px solid;border-color: #00FA9A transparent transparent transparent;'></div>
         </div>
         </div>`;
    pop.id="zb_measure";
    pop.style.position = 'fixed';
    pop.style.left = (screenPosition['x']+offset['x']-100) + 'px';
    pop.style.top = (screenPosition['y']+offset['y'] -200) + 'px';
    document.body.appendChild(pop);
    cviewer.scene.postRender.addEventListener(() => {
      //转化为屏幕坐标
      var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(cviewer.scene, position);
      if(!windowPosition){
        return;
      }
      pop.style.left = (windowPosition.x-100+offset['x']) + 'px';
      pop.style.top = (windowPosition.y-200+offset['y']) + 'px';
      // 解决滚动不隐藏问题
      const camerPosition = cviewer.camera.position;
      let height = cviewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
      height += cviewer.scene.globe.ellipsoid.maximumRadius;
      if ((!(Cesium.Cartesian3.distance(camerPosition, position) > height)) && cviewer.camera.positionCartographic.height < 50000000) {
        pop.style.display = "block"
      } else {
        pop.style.display = "none"
      }
    })
    return point;
  }
}
export default MeasurePoint;



